<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="..//js/jquery-1.11.3.min.js"></script>
    <link rel="stylesheet" href="../css/xiangqing.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1341521_yvtami4tmb.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1347440_mkm42ml7r4.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1344664_76t1p12cytu.css">
    <script src="../js/api.js"></script>
    <title>Document</title>
    <script>
        function nu() {
            $.post(cart_cartShow_Api, {
                id
            }, data => {
                console.log(data);
                let number = 0
                data.forEach(v => {
                    number += v.number
                })
                console.log(number);
                $('#num1').text(number)
            })
        }
        nu()
    </script>
</head>

<body>
    <main>
        
    </main>
    <footer>
        <div id="shopping">
            <span id="img"><img src="../image/xiangqing-cart.png" alt=""><span id="num1"></span></span>
            <p>购物车</p>
        </div>
        <div id="add">加入购物车</div>
    </footer>
    <script src="../js/rem.js"></script>
    <script src="../js/comment.js"></script>
    <script src="../js/axios.min.js"></script>
    <script src="../js/api.js"></script>
    <script src="../js/jquery-1.11.3.min.js"></script>
    <script>
        var gb = function () {
            let goback = document.querySelector(".icon-fan_hui");
            goback.onclick = function () {
                window.history.back(-1);
            }
        }
    </script>
    <script>
        let search = location.search.slice(1);
        var goods_id = parseQuery(search);
        goods_id = Number(goods_id.id);
        console.log(goods_id)
        //  根据商品id展示详情
        $.post(goods_goodsDetail_Api, {
            id: goods_id
        }).then(res => {
            console.log(res);
            let html = `
            <div id="pimg">
            <span id="back" class="iconfont icon-fan_hui"></span>
            <span id="send" class="iconfont icon-fenxiang"></span>
            <span id="more" class="iconfont icon-gengduo"></span>
            <ul id="point">
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <div id="cont">
            <h3>${res.name}</h3>
            <p><span id="tag">第二份19.9元</span>${res.describe}</p>
            <div id="Price">
                <p id="pric">
                    <span>￥</span>
                    <span>${res.price}</span>
                    <span>.90</span>
                </p>
                <div id="address"><span>产地：</span><span>${res.origin}</span></div>
            </div>
        </div>
        <div id="discount">
            <span>促销</span>
            <p>优惠</p>
        </div>
        <div id="seven">
            <span>i</span>
            <p>不支持七天无理由退货</p>
        </div>
        <div id="norms">
            <span>规格</span>
            <p>300克/盒</p>
        </div>
        <div id="num">
            <span>数量</span>
            <input type="button" value="-" id="sub">
            <input type="text" value="1" id=goods_num>
            <input type="button" value="+" id="add">
            <span>限购<em id="limit_num">2</em>件</span>

        </div>
            `
            let main = document.querySelector("main");
            main.innerHTML = html;
            gb();
            numChange();
        })

        let numChange = function () {
            let addBtns = document.querySelector("#add");
            addBtns.onclick = function () {
                let goods_num = document.querySelector("#goods_num")
                let limit_num = document.querySelector("#limit_num")
                console.log(limit_num.value);
                goods_num.value++;
                if (goods_num.value >= limit_num.value + 1) {
                    goods_num.value = limit_num.value;
                    console.log('wdnmd')
                }
            }

            let subBtns = document.querySelector("#sub");
            subBtns.onclick = function () {
                let goods_num = document.querySelector("#goods_num")
                console.log(goods_num.value);goods_num
                goods_num.value--;
                if (goods_num.value == 0) {
                    goods_num.value = 1
                }
            }
        }
        //加入购物车
        $('#add').click(function(){
            nu()//更新数量
        })
    </script>
    <script>
        //点击下方购物车按钮跳转购物车
        $("#shopping").click(function(){
            location.href = '购物车.html';
            })
        //点击加入购物车 
        $("#add").click(function(){
            // console.log(goods_id);
            // console.log($("#goods_num").val());
            let number = $("#goods_num").val();
            // console.log(number)
            //判断购物车有没有这个数据  有就加商品数量 没有就加入购物车
            $.post(cart_cartShow_Api,{id},function(res){
              console.log(res);
              res.forEach(res=>{
                  if(res.id == goods_id){
                      console.log('有这个商品',res.number)
                      let num1 = res.number
                      number = Number(num1)+Number(number);
                      console.log(number)
                      numAdd();
                  }else{
                      numAdd();
                  }
              })
            })
            let numAdd = function(){
            $.post(insertGoods_Api,{id,goodsId:goods_id,number},function(data){
                        console.log(data);
                    })}
        })
    </script>
</body>

</html>